<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.4.1/index.css">
</head>
<body>
	<section class="todoapp">
		<header class="header">
			<h1>TodoLists</h1>
			
			<input @keyup.enter="editTodo" class="new-todo" placeholder="What needs to be done?" autofocus>
		</header>
		<!-- This section should be hidden by default and shown when there are todos -->
		<section class="main">
			<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">
			<label for="toggle-all">Mark all as complete</label>
			<ul class="todo-list">
				<!-- These are here just to show the structure of the list items -->
				<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
				<li v-for="todo in filterTodos" :key = "todo.id" :class="{completed:todo.completed}">
					<div class="view">
						<input @click="" class="toggle" type="checkbox" v-model=todo.completed>
						<label>{{todo.title}}</label>
						<button @click="removeTodo(todo.id)" class="destroy"></button>
					</div>
					<input class="edit" value="Create a TodoMVC template">
				</li>
			</ul>
		</section>
		<!-- This footer should be hidden by default and shown when there are todos -->
		<footer class="footer">
			<!-- This should be `0 items left` by default -->
			<span class="todo-count"><strong >{{getUncompleted()}}</strong> item left</span>
			<!-- Remove this if you don't implement routing -->
			<ul class="filters">
				<li>
					<a :class="{selected: visibility === 'all'}" href="#/">All</a>
				</li>
				<li>
					<a :class="{selected: visibility === 'active'}"href="#/active">Active</a>
				</li>
				<li>
					<a :class="{selected: visibility === 'completed'}"href="#/completed">Completed</a>
				</li>
			</ul>
			<!-- Hidden if no completed items are left ↓ -->
			<button @click="clearCompleted"class="clear-completed">Clear completed</button>
		</footer>
	</section>
	<script src="./vue.min.js"></script>
	<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
	
	<script>
	  const app = new Vue({
		el:'.todoapp',
		data(){
			return{
				todolist:[{
					id:'123',
					title:'2.27写代码',
					completed:true
				},
				{
				    id:'456',
					title:'2.28去南京大屠杀纪念馆',
					completed:false
				},
				{
				    id:'789',
					title:'2.29去南京博物馆',
					completed:false
				},
				{
				    id:'1012',
					title:'3.1爬紫金山',
					completed:false
				},
				{
				    id:'131415',
					title:'3.2去中山陵风景区',
					completed:false
				}
			],
			visibility:'',
			count:0,
			
			}
		},
		methods:{
			toggleAll(e){
				this.todolist.forEach(item=>item.completed=e.target.checked)
			},
			removeTodo(id){
			    this.todolist = this.todolist.filter(item=>item.id!==id)
			},
			getUncompleted(){
			    return this.todolist.filter(item=>!item.completed).length
			},
			clearCompleted(){
			    this.todolist = this.todolist.filter(item=>!item.completed)
			},
			editTodo(e){
				const title = e.target.value.trim()
				if(!title){
				    return 
				}

				setCookie(`${count++}`,title,7)
			    this.todolist.push({id:Date.now(),title,completed:false})
				e.target.value=''
			},  
			// 获取参数
			onhashchange() {
				const hash = window.location.hash.replace(/#\/?/, '')
				if(['all','active','completed'].includes(hash)) {
					this.visibility = hash
				}else {
					window.location.hash =''
					this.visibility = 'all'
				}
			},
			getTodoList(){
				$.ajax({
					url:'getTodoList.php',
					type:'post',
					data:{user:`${user}`},
					dataType:'json',
					success:function(data){
						this.todolist.push(data[0])
						console.log('success')
						return this.todolist
					},
					error:function(jqXHR,textStatus,errorThrown){
						console.log('Error:',textStatus,errorThrown)
					}
				})
			},
			},
		
		
		computed:{
			filterTodos(){  // 根据参数展示相关内容
				let filteredTodo = []
			    switch(this.visibility) {
					case 'all':
						//从cookie获取数据
						
						return this.todolist
						
					break
					case 'active':
						return this.todolist.filter(item=>!item.completed)
					break
					case 'completed':
						return this.todolist.filter(item=>item.completed)
				} 
			},
			
		},
		mounted(){  //加载时执行操作
			
			window.addEventListener('hashchange',this.onhashchange)
			this.onhashchange()
			
			// 执行ajax  根据user 获取待办列表
			this.getTodoList()
			

		}
	  })
	</script>
</body>
</html>